'use client'

interface GlobalLogoProps {
  courseNumber: number
  show: boolean
  progress?: number // 进度百分比 0-100
}

export function GlobalLogo({ courseNumber, show, progress = 0 }: GlobalLogoProps) {
  if (!show) return null

  // 根据进度确定颜色
  const getProgressColor = () => {
    if (progress >= 100) {
      return 'from-green-400 to-emerald-500' // 完成时绿色
    } else if (progress >= 75) {
      return 'from-blue-400 to-indigo-500' // 接近完成时蓝色
    } else if (progress >= 50) {
      return 'from-purple-400 to-pink-500' // 进行中紫色
    } else if (progress >= 25) {
      return 'from-orange-400 to-red-500' // 开始时橙色
    } else {
      return 'from-gray-300 to-gray-400' // 未开始时灰色
    }
  }

  const progressColor = getProgressColor()

  return (
    <div className="absolute top-2 right-2 z-50">
      <div className="relative bg-white/90 backdrop-blur-sm rounded-lg shadow-lg border border-white/60 overflow-hidden">
        {/* 进度条背景 */}
        <div 
          className={`absolute inset-0 bg-gradient-to-r ${progressColor} transition-all duration-1000 ease-out`}
          style={{ 
            width: `${progress}%`,
            opacity: 0.15
          }}
        ></div>
        
        {/* 内容区域 */}
        <div className="relative flex items-center gap-2 px-3 py-2">
          <div className="text-lg">📚</div>
          <div className="text-sm font-bold text-purple-600">岚小字识字</div>
          <div className="text-xs text-gray-500">第{String(courseNumber).padStart(3, '0')}课</div>
          
          {/* 进度百分比显示 */}
          {progress > 0 && (
            <div className="text-xs font-medium text-gray-600 ml-1">
              {Math.round(progress)}%
            </div>
          )}
        </div>

        {/* 进度条边框效果 */}
        <div 
          className={`absolute bottom-0 left-0 h-0.5 bg-gradient-to-r ${progressColor} transition-all duration-1000 ease-out`}
          style={{ width: `${progress}%` }}
        ></div>
      </div>
    </div>
  )
} 